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Unit One: Lesson 1: Concepts and basics of Websites 


=" Website: It is a site on the internet that consists of a webpage or more, it is visited through a certain web 


= Web Page: It is a document with electronic content on the internet which can be shown through a web browser. 


Home Page: It is the opening page (main) in the website through which other pages can be visited. 


Components of the web page: includes texts, images, audio files, videos and hyperlinks. 


Static Web Page: The content of these pages is previously prepared by the page The developer. content doesn’t 
change and can’t be edited by the visitor. It is designed by HTML code. 


Interactive Web Page: It is a webpage that has a content allowing the visitors to interact with and manipulate. 
This type is designed by HTML, JavaScript, PHP and others. 


Lesson Two: Stages of designing and creating A Website 
Stages of designing and creating a website (5 Steps): 


1. Stages of designing 
and creating a 
website 


2. design the web pages. 


In this stage, we draw 
a simple diagram 
of the web pages of 

the website, 

the homepage and the 
connected pages. 
Decide the 
information and data 
to be included as data 
or service according 
to the need.) 


a one as we design 


the format and shape of the 
homepage and other pages. 
The different format types 
are designed, the color, the 
background, the font size 
and type, place of putting 
text, images and video clips 
and decide the different 
hyperlinks inside the same 
page. 


3. prepare and develop the 
web pages. 


4. implement the web 
pages. 


5. publish the 
website on the 
internet. 


a. are 


as follows: 

~ Prepare the text which 
will be added to the page 
using a text editor 
program and save it in a 
folder. 
~Prepare the image files 

and save them in a folder. 
~Prepare the video and 

sound files and save them 


in a folder. 


This is the stage when we: 
1. Change the paper design 
into web page to be shown 
and visited on the 
internet with an internet 
browser program. 
2. Input the data, text, 
images, videos and so on. 
3.Create the necessary 
hyperlinks to connect the 
different pages. 


-In this stage, a 
web address is 
taken and the 
storage 
capacity is 
decided to save 
on one of the 
servers and 
publish the site 
on the internet 
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Lesson Three: Create and edit audio files 


There are many programs that are used on dealing with audio files. These programs help to process audio files in an eas 


proper way. 


Firstly: setup and 
processing to create an 
audio file stage 


Secondly, implementation stage 


Thirdly, modifying the sound 
(or audio clip) 


1- Preparing for collecting 
data about your webpage. 
2- Preparation and 
processing of software and 
hardware components: 
-Make sure you install a 
program and create audio 
processing on computers 
-Make sure your 
microphone is plugged to 
your computer to record. 


- Use the "Audacity" program to create audio files and audio 
processing which is an open-source software, a program 
that can be run on different operating systems like 
(Windows -Linux) you can 
-To start voice recording through the program, click the 
Record button where the program becomes in the 
audio recording mode. 

-To end entering audio data, click "Stop" |, O button in 
the program. 

-To listen to the sound that has been entering click "Play" 
button (f=, in the program, listening to the sound 
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through the speakers. 


= To add an effect on the 
audio clip: 

- Select/Highlight the 
required audio clip to add 
effect to it, then from 
"Effect" menu select one 
of the desired changes. 
= To cut and paste an audio 

clip: 

Select the audio clip you 
want to cut, from “Edit” 
menu", select "Cut" 


Fourthly: Export an audio file with an appropriate extension. 


- Move the pointer on the 
timeline to the desired 


From the File menu, 
select "Export Audio" then 
select the appropriate 
extension of the audio 
file. 

There are different types 
of extensions of audio 
(WAV - MP3) 


Comparison WAV 


MP3 


part to paste the audio 


characterized by the the sound is of less purity, 


Quality and 


purity compared with the file 


with WAV extension. 


sound 
quality and clarity 


clip, From the “Edit” 
menu, select" Paste". 
=" To delete an audio section: 


large storage capacity | less storage capacity 


Storage 


Select the audio section 


Not appropriate via appropriate via websites. 


Publishing websites. 


you want to delete, press 
"Delete" from the 
keyboard. 
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By 
Lesson Four: Creating and Saving Video Files JA 
Examples on software for creating and editing video files: - “Kdenlive” and “OpenShot”, which are open sourceand 


free to use and easy to operate with Linux and Ms. Windows. -There is also “Movie Maker” which runs in Windows. 
The interface consists of: 


1)Main Toolbar 2) Project Files 3) Function Tab (Move - Audio files) 4) Preview Window 
5) Edit Toolbar 6) Zoom Slider 7) Play head/Ruler 8)Timeline. 


Program Timeline: 


1- Ruler (to show the time length on the timeline). 

2- Play Head (reads the current clip on the timeline to show in Preview Window). 

3- Current Clip (image, sound or video). 

4-Tracks (They are similar to Layers where images, sounds or video caption clip is put on the track. Unlimited number 
of tracks can be used in the project). 


To create a video, follow the following steps: 


1- Import images to the 2-Import a sound file tothe | 3- Preview the 4-Save Project: 
program program video. 
- -Click Import files icon + in the | -To add sound file, click -To preview the video, | -Save all the files (images, 
Main Toolbar to add the images Add File icon + on the click the Play icon in| sound, text, etc.) in one 
--You can import files from File | Main Toolbar and add the the Preview window. | folder. 
then Import Files. sound file to appear in -On the Main Toolbar, select 
--You can also drag & drop the| “Project Files” tab. “File "then “Save Project as” 
files you need to the “Project | -Drag and drop the sound sign -Name the Project “.osp” and 
files”. to insert in one track. choose the folder to save in. 
-Put the images on the program -End the program. 
timeline. 


After previewing the Video, the clip may need some editing like Reorder the scenes, delete, increase the time, decrease the 
time or adjust the time to match the sound file length. 
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we 


Control the play time of 
the Video Clip 


Control the time length for 
images and sound on the 
timeline: 


Add Effects to a Video Clip: 


Second: Add Transitions to a 
Video Clip: 


We can control the 
sound clip to end at 
the same time with 
the last image clip 
on the timeline. 


~Define the time length of the 
clip on the timeline. 

~Drag and drop the head of 

the play indicator and move 

it till it goes to the right 

place on the timeline. 

~Right click the clip Track, a drop 
box appears, select: 

~ Slice Clip to split the clip into 
two slides. 

~Keep Both Slides, the right and 
left slides are kept. 

~Keep the left slide. 

~Keep the right slide. 


Click the Effects tab. 

Drag and Drop an effect to add it 
to the clip. 

The effect sign appears on the 
clip. 

To read the effect name put the 
cursor on the effect sign. 

To delete the effect, right click 
the effect sign and select 
“Remove Effect”. 


Click the Transitions tab. 

Some transition appears. 

Drag and drop one transition and 
add it to the clip. 

Add a transition at the beginning 
and at the end of the clip. 

Clip the transition time length by 
drag and drop it to increase or 
decrease it. 


Add Text to a Video clip: 


Export a Video Clip to file 


From Title menu, select Title. 

Fill in the dialog box. 

Save text in a file “Save”. 

~Name the text file in English. 
The text file is found in “Project 
Files”. 

Add text file to the video clips by 
drag & drop the text file and add 
it to a track. 


1.Press "Export Video". 

2.In the Dialog box of “Export 
Video", select the following: 
a)“File Name”. 

b)Folder Path. 

c)Extension of the Target video 
File. 

d) Decide the Quality level. 
e)Export the video by pressing 
“Export Video”. 


Comparison 
Quality and purity 
Storage 
Publishing 


AVI 
original quality 


large storage capacity 


Not appropriate for publishing via websites. 


MP4 


less purity, compared with the file with AVI extension. 


less storage capacity 


appropriate for publishing via websites. 
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Unit One: Lesson One: Create Web Pages by Using HTML 


HTML (Hyper Text Markup Language) 


-It is a coding language used to create internet pages which are used through an internet browser (e.g. : Internet explorer- google 
chrome, Opera,... ) 

HTML codes: 

To create a static web page, HTML codes are used, these codes are called Tags. An internet browser executes these tags on the 
browser page. 


To create a web page using HTML tags, do as follows: 
~ Create a text file using a text editor to write and edit the HTML tags (ex: Notepad) 


Write the HTML tags between these signs “< ... >”. 

Write most of the tags with a start" < >" and an end “</... > 
Save the text file with the HTML tags with.htm or .html extension 
Open the saved file using a web browser and notice the result. 
Write HTML tags in capital or small letters. 


The Structure of creating a web page using HTML: 
The HTML tag is divided into two parts: 


1- Heads the part where the page information is written for the browser like page title. 
2- Body: the part where the content is written. 
3- Some HTML tags to create a web page as follows: 


Function Associated 


Written at the beginning of the code to refer 
that the document is written by html. 
A place where we write the web page title to 
the browser 
A place where we write the content that will 
appear inside the web page 


Choose a title to the web page č _—_—_ 


Properties 
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Function Associated 
Properties 


Finishi the current line and start a new line 


To add a text in the middle of the line 
To insert a space between words in the 
browser 
size 


(Note: "Internet Explorer" is the only browser that supports the <bgsound> 
tag) 
(Note: If the audio in another Folder, we must write the complete path of 
the audio file) 
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